<template>
	<view class="bgBox">
		<view class="head-box">
			<view class="avatar"  v-if="userId==''" @click="gonavigate('/pages/login/login')">
				<!-- 默认头像 -->
				<u-avatar size="70" mode="aspectFill" width="70" src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
				<view class="user-info">
					<view class="user-name">点击登录</view>
					<text class="user-id">账号：XXXX</text>
				</view>
			</view>
			<view class="avatar" v-else>
				<u-avatar v-if="userInfo.avatarImg" size="70" mode="aspectFill" width="70" :src="userInfo.avatarImg"></u-avatar>
				<!-- 默认头像 -->
				<u-avatar v-else size="70" mode="aspectFill" width="70" src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
				<view class="user-info">
					<view class="user-name">{{userInfo.username}}</view>
					<text class="user-id">账号：{{userInfo.userId}}</text>
				</view>
			</view>
			
			<u-icon name="setting" size="25" @click="gonavigate('/pages/setting/index')"></u-icon>
		</view>
		
		<view class="data-box">
			<view class="fans">
				<text class="number">1</text>
				<text class="fans-text">粉丝</text>
			</view>
			<view class="fans">
				<text class="number">1</text>
				<text class="fans-text">关注</text>
			</view>
			<view class="fans">
				<text class="number">1</text>
				<text class="fans-text">文章</text>
			</view>
			<view class="fans">
				<text class="number">1</text>
				<text class="fans-text">喜欢</text>
			</view>
		</view>
		
		<view class="svip-box">
			<u--image src='/static/images/my/my-SVIP.png' height="72" width="100%"></u--image>
		</view>
		
		<view class="order-box">
			<view class="order-top" @click="gonavigate('/pages/member/myOrder/all')">
				<view class="order-title">我的订单</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="order-bottom">
				<view class="order-item" v-for="(item,index) in orderList" :key="index">
					<u-icon size="45" :name='item.orderImg'></u-icon>
					<text class="order-text">{{item.orderText}}</text>
				</view>
			</view>
		</view>
		
		<view class="img-box"><u--image width="100%" height='57' radius='6' src='/static/images/my/my-banner.jpg'></u--image></view>
		
		<view class="my-treasure-box">
			<view class="order-top">
				<view class="order-title">我的宝盒</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="order-bottom">
				<view class="order-item" v-for="(item,index) in jewelBox" :key="index">
					<u-icon size="25" :name='item.orderImg'></u-icon>
					<text class="my-treasure-text">{{item.orderText}}</text>
				</view>
			</view>
		</view>
		
		<view class="contact-phone">
			<u-icon name="phone" size="20"></u-icon>
			<text class="contact-text">全国服务热线：400-888-8830</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				userId:'',
				userInfo:[],
				orderList:[
					{
						orderImg:'/static/images/my/my-pay.png',
						orderText:'待付款'
					},
					{
						orderImg:'/static/images/my/my-deliver.png',
						orderText:'代发货'
					},
					{
						orderImg:'/static/images/my/my-getGood.png',
						orderText:'待收货'
					},
					{
						orderImg:'/static/images/my/my-reveiw.png',
						orderText:'待评价'
					}
				],
				jewelBox:[
					{
						orderImg:'/static/images/my/myBox-focus.png',
						orderText:'关注店铺'
					},
					{
						orderImg:'/static/images/my/myBox-measure.png',
						orderText:'圈口测量'
					},
					{
						orderImg:'/static/images/my/myBox-browser.png',
						orderText:'历史记录'
					},
					{
						orderImg:'/static/images/my/myBox-publish.png',
						orderText:'我发布的'
					},
					{
						orderImg:'/static/images/my/myBox-contactUs.png',
						orderText:'联系我们'
					},
				]
			}
		},
		onShow() {
			this.userId = uni.getStorageSync('userId')
		},
		mounted() {
			uni.request({
				url:"http://localhost:3000/user/getUsersById",
				data:{
					userId: this.userId
				},
				success:(res)=>{
					this.userInfo = res?.data?.data;
					// console.log(this.userInfo)
				}
			})
		},
		methods:{
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 初始化页面
			init(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox{
		margin: $uni-spacing-row-lg;
		.head-box,.svip-box,.order-box,.img-box,.my-treasure-box{
			padding: $uni-spacing-row-lg 0;
		}
		.head-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $uni-spacing-row-lg $uni-spacing-row-sm;
			.avatar{
				display: flex;
				align-items: center;
				.user-info{
					padding: $uni-spacing-row-base;
					.user-name{
						font-size: 20px;
						padding: $uni-spacing-row-sm;
					}
					.user-id{
						font-size: $uni-font-size-sm;
						padding: $uni-spacing-row-sm;
					}
				}
			}
		}
		.data-box{
			display: flex;
			justify-content: space-around;
			.fans{
				display: flex;
				flex-direction: column;
				align-items: center;
				.fans-text{
					padding: $uni-spacing-col-sm 0;
				}
			}
		}
		.order-box,.my-treasure-box{
			background-color: $gs-jpBg;
			border-radius: 12px;
			.order-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 $uni-spacing-row-lg;
				.order-title{
					color: $uni-text-color;
				}
			}
			.order-bottom{
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: $uni-spacing-col-lg $uni-spacing-row-base 0 $uni-spacing-row-base;
				.order-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					.order-text{
						font-size: $uni-font-size-base;
						color: $uni-text-color;
						padding: $uni-spacing-row-sm;
					}
				}
				
			}
		}
		
		.my-treasure-box{
			.my-treasure-text{
				font-size: $uni-font-size-sm;
				color: $gs-color-grey;
				padding: $uni-spacing-row-sm;
			}
		}
		.contact-phone{
			display: flex;
			justify-content: center;
			position: relative;
			bottom: -70px;
			.contact-text{
				font-size: $uni-font-size-sm;
				color: $uni-text-color;
			}
		}
	}
</style>